<template>
	<view class="container">
		<view class="" v-for="item,index in order.contacts" :key="index">
			<!-- 商品图片 -->
			<view class="container-view" v-if="index<order.ticketAmount">
				<!-- :style="{'background-image': 'url('+imageUrl+')'}" -->
				<view class="product-image" >
					<view class="product-image-box">
						<image class="product-image-box-img" :src="host+order.goods.icon" mode="aspectFill"></image>
						<view class="product-image-r">
							<view class="product-image-r-title">
								{{ order.goods.name }}
							</view>
							<view class="product-image-r-time">
								{{ order.ticketDate }}
							</view>
							<view class="product-image-r-info">
								<text class="product-image-r-info-addr">{{ order.goods.region }}</text>
								<!-- <text class="product-image-r-info-text">红节奏Livehouse</text> -->
							</view>
						</view>
					</view>
				</view>
				<view class="container-box">
					<view class="cart-item-left-info">
						<text class="price">1</text>
						<text class="sum">张</text>
					</view>
					<view class="container-box-box">
						<view class="container-box-box-title">
							凭本人有效身份证件原件入场
						</view>
						<view class="container-box-box-code">
							<!-- ticketStatus  出票状态(0:待出票 1:已出票 2:已完成) -->
							<image class="container-box-box-code-img1" v-if="order.ticketStatus==0" src="../static/img/7.png" mode="widthFix"></image>
							<image class="container-box-box-code-img1" v-if="order.ticketStatus==1" src="../static/img/5.png" mode="widthFix"></image>
							<image class="container-box-box-code-img1" v-else-if="order.ticketStatus==2" src="../static/img/6.png" mode="widthFix"></image>
							<image class="container-box-box-code-img" src="@/static/img/card.png" mode="aspectFill"></image>
							<view class="container-box-box-code-box">
								<view class="container-box-box-code-box-name">
									{{changeName(item.realname)}}
								</view>
								<view class="container-box-box-code-box-name">
									{{changeId(item.IDNumber)}}
								</view>
							</view>
						</view>
						<!-- 场次价格等信息 -->
						<view class="container-box-box-code-box1">
							<view class="container-box-box-code-box1-name1" v-if="order.ticketStatus==1||order.ticketStatus==2">
								订单已成功出票，您可登录对应票务平台，凭订单信息与身份证查询详情。平台全程监督，全力保障您的观演权益 。
							</view>
							<view class="container-box-box-code-box1-name3" v-if="order.ticketStatus==1||order.ticketStatus==2">
								{{order.ticketInformation}} <i @click="copy(order.ticketInformation)" class="iconfont icon-muban"/>
							</view>
							<view class="container-box-box-code-box1-name2">
								{{ order.price }}元
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				NewsList: [{
					title: '人气飙升中'
				}, {
					title: '标记收藏让我更懂你'
				}],
				// 多少人想看的 轮播
				indicatorDots1: false,
				autoplay1: true,
				vertical1: true,
				interval1: 5000,
				duration1: 1000,
				circular1: true,
				imageUrl:'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
				// order: {
				// 	image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg', // 商品图片
				// 	title: '[南宁][送机酒保障/酒店权益][强实名/有条件退款]周杰伦2025“嘉年华”世界巡回演唱会', // 商品标题
				// 	price: 99.9, // 商品价格
				// 	specs: ['黑色', '白色', '灰色', '蓝色'], // 商品规格
				// 	shipping: 10, // 运费
				// 	time: '2025.04.12'
				// },
				order:{
					contacts:[]
				},
			};
		},
		onLoad(option) {
			if (option.obj) {
			  var pList = decodeURIComponent(option.obj)
			  this.order = JSON.parse(pList)
			}
			  console.log('this.order',this.order)
		},
		methods: {
			changeName(val){
				return val.slice(0,1)+'*'+val.slice(2,val.length)
			},
			changeId(val){
				 return val.slice(0, 6) + "********" + val.slice(-4)
			},
			copy(val){
				const param = {
					title:val,
					msg:'链接已复制，请粘贴至手机浏览器打开'
				}
				this.$publicFun.copy(param)
			}
		},
	};
</script>

<style>
	page {
		background: #000000;
		height: 100%;
	}
</style>
<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		padding: 0 20rpx 150rpx;
		box-sizing: border-box;

		.container-view {
			margin-top: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 30rpx;
			color: #333333;
		}

		.product-image {
			border-radius: 30rpx 30rpx 0 0;
			width: 100%;
			height: 280rpx;
			overflow: hidden;
			background-position: center center;
			background-size: cover;
			position: relative;
			z-index: 0;

			.product-image-box {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background:linear-gradient(to right ,rgba(255,255,255,.1),rgba(255,255,255,.7),rgba(255,255,255,.1));
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 30rpx 25rpx;
				box-sizing: border-box;

				.product-image-box-img {
					width: 170rpx;
					height: 220rpx;
					border-radius: 6rpx;
				}

				.product-image-r {
					flex: 1;
					margin-left: 30rpx;
					color: white;

					.product-image-r-title {
						font-size: 30rpx;
						font-weight: bold;
						height: 150rpx;
					}

					.product-image-r-time {
						font-size: 28rpx;
						color: rgba(255, 255, 255, .7);
						margin-bottom: 10rpx;
					}

					.product-image-r-info {
						display: flex;
						align-items: center;
						color: rgba(255, 255, 255, .7);
						font-size: 28rpx;

						.product-image-r-info-addr {
							padding-right: 10rpx;
							margin-right: 10rpx;
							border-right: 1rpx solid #cac1c4;
							height: 14rpx;
							line-height: 14rpx;
						}

						.product-image-r-info-text {}
					}
				}
			}
		}

		.container-box {
			box-sizing: border-box;
			padding: 25rpx 35rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 0 0 30rpx 30rpx;

			.cart-item-left-info {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.price {
					padding-right: 10rpx;
					font-size: 32rpx;
					color: #ed171f;
				}

				.sum {
					color: #333333;

				}
			}

			.container-box-box {
				margin-top: 25rpx;
				text-align: center;

				.container-box-box-title {
					font-size: 42rpx;
					font-weight: bold;
				}

				.container-box-box-text {
					margin-top: 24rpx;
					font-size: 22rpx;
					color: #333333;
				}

				.container-box-box-code {
					margin: 50rpx auto 0;
					width: 560rpx;
					height: 560rpx;
					padding: 60rpx;
					box-sizing: border-box;
					border: 5rpx solid #eeeeee;
					border-bottom: 10rpx solid linear-gradient(to right, green, red, yellow);
					border-radius: 10rpx;
					box-sizing: border-box;
					position: relative;
					.container-box-box-code-img1{
						position: absolute;
						top: -20rpx;
						right: -50rpx;
						z-index: 1;
						width: 100rpx;
						height: 100rpx;
					}
					.container-box-box-code-img {
						width: 430rpx;
						height: 250rpx;
						border-radius: 20rpx;
					}

					.container-box-box-code-box {
						margin-top: 45rpx;
						font-size: 35rpx;
						font-weight: bold;

						.container-box-box-code-box-name {
							margin-bottom: 35rpx;
						}
					}
				}
			}

			.container-box-box-code-box1 {
				margin-top: 50rpx;

				.container-box-box-code-box1-name1 {
					font-size: 22rpx;
					margin-bottom: 32rpx;
					font-weight: bold;
				}

				.container-box-box-code-box1-name2 {
					font-size: 32rpx;
					color: #a6a6a6;
				}
				.container-box-box-code-box1-name3{
					font-size: 22rpx;
					margin-bottom: 32rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #a6a6a6;
					.iconfont{
					color: #a6a6a6;
						margin-left: 10rpx;
					}
					
				}
			}
		}
	}
</style>